<template>
  <el-header 
    class="app-header" 
    :style="{ backgroundColor: `rgba(255,255,255,${scrollOpacity})` }"
    fixed
  >
    <!-- LOGO区域 -->
    <div class="header-logo" @click="goToHome">
      <!-- 自定义LOGO图标 -->
      <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="12" cy="6" r="4" stroke="#1989fa" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M8.5 18c0-2.5 1-4.5 2.5-5.5c1.5-1 3.5-1 6 0l0 0c2 1 3 3 3 5.5" stroke="#1989fa" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M16 21v-3.5c0-1-.5-2-1.5-2.5s-2 .5-3 1.5c-1-1-1.5-1.5-3-1.5s-1.5 1.5-1.5 2.5v3.5" stroke="#1989fa" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <span class="logo-text">医联智导</span>
    </div>
    
    <!-- 右侧功能区 -->
    <div class="header-right">
      <el-button 
        type="text" 
        class="help-btn" 
        @click="openHelpCenter"
        :icon="HelpFilled"
      >
        帮助中心
      </el-button>
      <el-button 
        v-if="!isLoggedIn" 
        type="text" 
        class="login-btn"
        @click="goToLogin"
      >
        登录/注册
      </el-button>
      <el-dropdown v-else class="user-dropdown" @command="handleUserCommand">
        <span class="user-info" @click.stop>
          <el-avatar :src="userInfo?.avatar || defaultAvatar" size="small" />
          <span class="user-name">{{ userInfo?.name || '用户' }}</span>
          <el-icon class="user-arrow"><ArrowDown /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="profile">个人中心</el-dropdown-item>
            <el-dropdown-item command="records">我的病历</el-dropdown-item>
            <el-dropdown-item command="settings">设置</el-dropdown-item>
            <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-header>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { ElHeader, ElButton, ElIcon, ElDropdown, ElDropdownMenu, ElDropdownItem, ElAvatar, ElMessage } from 'element-plus';
import { HelpFilled, ArrowDown } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '@/stores/auth';

const router = useRouter();
const authStore = useAuthStore();
const scrollOpacity = ref(1); // 滚动时透明度（1→0.9）
const defaultAvatar = '';

// 计算属性
const isLoggedIn = computed(() => authStore.isLoggedIn);
const userInfo = computed(() => authStore.userInfo);

// 监听滚动事件，改变导航栏透明度
const handleScroll = () => {
  const scrollTop = window.scrollY;
  scrollOpacity.value = scrollTop > 50 ? 0.9 : 1;
};

// 生命周期钩子
onMounted(() => {
  window.addEventListener('scroll', handleScroll);
  // 刷新用户信息
  if (isLoggedIn.value) {
    refreshUserInfo();
  }
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});

// 导航方法
const goToHome = () => router.push('/');
const goToLogin = () => router.push('/login');
const goToUserCenter = () => {
  ElMessage.info('个人中心功能开发中');
};
const goToMedicalRecord = () => router.push('/medical-record');

// 刷新用户信息
const refreshUserInfo = async () => {
  try {
    await authStore.refreshUserInfo();
  } catch (error) {
    console.error('刷新用户信息失败:', error);
  }
};

// 打开帮助中心
const openHelpCenter = () => {
  ElMessage.info('帮助中心功能开发中');
};

// 退出登录
const logout = async () => {
  try {
    authStore.logout();
    ElMessage.success('退出登录成功');
    router.push('/');
  } catch (error) {
    console.error('退出登录失败:', error);
    ElMessage.error('退出登录失败，请重试');
  }
};

// 处理用户下拉菜单命令
const handleUserCommand = (command) => {
  switch (command) {
    case 'profile':
      goToUserCenter();
      break;
    case 'records':
      goToMedicalRecord();
      break;
    case 'settings':
      ElMessage.info('设置功能开发中');
      break;
    case 'logout':
      logout();
      break;
    default:
      break;
  }
};
</script>

<style scoped>
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: background-color 0.3s ease;
  z-index: 999;
}
.header-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo-img {
  width: 32px;
  height: 32px;
}
.logo-text {
  font-size: 18px;
  font-weight: 600;
  color: #3B82F6; /* 医疗蓝主色 */
}
.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.help-btn, .login-btn {
  color: #666;
  transition: color 0.2s;
}
.help-btn:hover, .login-btn:hover {
  color: #3B82F6;
}
.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.user-name {
  font-size: 14px;
  color: #333;
}
</style>